<template>
  <CommonPage title="配送员管理">
    <template #mid>
      <SearchForm>
        <template #extraButtons>
          <a-button type="primary" @click="showCreate">新增配送员</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }: BodyCellOptions<Partial<DeliveryPersonItem>>">
        <div v-if="column.key === 'oper'">
          <a @click="showUpdateModal(record)">编辑</a>
          <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
        </div>
      </template>
    </SlTable>
    <CURDDialog
      ref="CURDModalIns"
      id-key="id"
      :columns="columns"
      create-title="新增配送员"
      update-title="编辑配送员"
      delete-message="确认删除该配送员吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :table-data="tableData"
      :curd="curd"
      :reload-table="reloadTable"
      @before-ok="beforeOk"
    />
  </CommonPage>
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { FormItemComponentType, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions, CURDModalEvent } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { type DeliveryPersonItem } from "/@/api/main/community/models";
import dayjs from "dayjs";
import type { BodyCellOptions } from "/@/types/antd";
import { loopItem } from "/@/utils/treeData";
import { Api } from "/@/api/main/community";

const { t } = useI18n();
const columns = ref<TableProps<Partial<DeliveryPersonItem>>["columns"]>([
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "性别",
    dataIndex: "sex",
  },
  {
    title: "身份证",
    dataIndex: "idCard",
  },
  {
    title: "手机",
    dataIndex: "phone",
  },
  {
    title: "手机识别码",
    dataIndex: "phoneIdCode",
  },
  {
    title: "邮箱",
    dataIndex: "email",
  },
  {
    title: "来源",
    dataIndex: "source",
  },
  {
    title: "居住地址",
    dataIndex: "domicile",
  },
  {
    title: "户籍地址",
    dataIndex: "registerAddress",
  },
  {
    title: "注册押金",
    dataIndex: "deposit",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
const model = ref<Partial<DeliveryPersonItem>>({
  name: "",
  sex: 1,
  idCard: "",
  phone: "",
  phoneIdCode: "",
  email: "",
  source: "",
  domicile: "",
  registerAddress: "",
  deposit: 0,
});
const modelFormSetting: FormItemData<Partial<DeliveryPersonItem>>[] = [
  {
    key: "name",
    max: 32,
    pattern: PatternKey.code,
    required: true,
    label: "名称",
  },
  {
    key: "sex",
    type: FormItemComponentType.SELECT,
    label: "性别",
    props: {
      options: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
      ],
    },
  },
  {
    key: "idCard",
    label: "身份证",
  },
  {
    key: "phone",
    label: "手机号",
  },
  {
    key: "phoneIdCode",
    label: "手机号识别码",
  },
  {
    key: "email",
    label: "邮箱",
  },
  {
    key: "source",
    label: "来源",
  },
  {
    key: "domicile",
    label: "居住地址",
  },
  {
    key: "registerAddress",
    label: "户籍地址",
  },
  {
    key: "deposit",
    label: "押金",
  },
];

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<DeliveryPersonItem>({
  getPageUrl: Api.deliveryPersonPage,
  cudUrl: Api.deliveryPerson,
});

onMounted(() => {});

let curParentId: number | null = null;
const showOptions = ref<ShowCURDModalOptions>();
function showSubCreate(record: Partial<DeliveryPersonItem>) {
  curParentId = record.id as number;
  showOptions.value = { action: CURDAction.CREATE };
}

function showCreate() {
  curParentId = null;
  showOptions.value = { action: CURDAction.CREATE };
}

function showUpdateModal(record: Partial<DeliveryPersonItem>) {
  showOptions.value = { action: CURDAction.UPDATE, record };
}

function handleDelete(record: Partial<DeliveryPersonItem>) {
  showOptions.value = { action: CURDAction.DELETE, ids: [record.id as number] };
}

function beforeOk({ action, model }: CURDModalEvent<Partial<DeliveryPersonItem>>) {}
</script>
